<template>
  <!-- 中台理赔工作列表模块-理赔二核 -->
  <div class="fillcontain">
    <!-- 查询条件 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
        <el-col :span="10">
        </el-col>
        <el-col :span="4" class="moreCondition">
          <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
          <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>
    <!-- 查询表单 -->
    <el-form v-show="isShow" :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px"
      class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="理赔号" prop="caseno">
            <el-input @keyup.enter.native="enterclick(searchParams.caseno)" clearable v-model="searchParams.caseno"
              placeholder="理赔号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投保人" prop="spolicyer">
            <el-input @keyup.enter.native="enterclick(searchParams.spolicyer)" clearable
              v-model="searchParams.spolicyer" placeholder="投保人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被保人" prop="sinsured">
            <el-input @keyup.enter.native="enterclick(searchParams.sinsured)" clearable v-model="searchParams.sinsured"
              placeholder="被保人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="理赔形态" prop="sclmstatus">
            <el-select clearable v-model="searchParams.sclmstatus" placeholder="理赔形态">
              <el-option v-for="item in clmstates" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核员" prop="sfirchkusr">
            <el-input @keyup.enter.native="enterclick(searchParams.sfirchkusr)" clearable
              v-model="searchParams.sfirchkusr" placeholder="审核员"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保单服务类型" prop="flag06">
            <el-select clearable v-model="searchParams.flag06" placeholder="理赔形态">
              <el-option v-for="item in flag06s" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二核状态" prop="chkstatus">
            <el-select clearable v-model="searchParams.chkstatus" placeholder="理赔形态">
              <el-option v-for="item in chkstatusTypes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>

    <div class="contain">
      <!-- 查询结果列表 -->
      <div class="table_container">
        <div style="margin-bottom: 10px;">
          <el-button type="danger" style="margin-left: 10px;" plain @click="lock()">加锁</el-button>
          <el-button type="danger" plain @click="unlock()">解锁</el-button>
        </div>
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" highlight-current-row
          header-cell-class-name="table-header-class" @selection-change="handleSelectionChange" :row-style="rowStyle"
          empty-text="无符合查询条件任务" style="width: 100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column property="schkousrid" label="检出人" align="center" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="orgName" label="机构" align="center" min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="channel" label="渠道" align="center" min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="caseno" label="理赔号" align="center" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" @click.stop="clmnumClick(scope.row, scope.$index)">{{ scope.row.caseno }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column property="chkstatus" label="二核状态" align="center" min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="spolicyer" label="投保人" align="center" min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sinsured" label="被保险人" align="center" min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sclmstatus" label="理赔形态" align="center" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sapptime" label="受理日" align="center" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sfirchkusr" label="审核人员" align="center" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="ssecchkusr" label="复核人员" align="center" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sdealtime" label="最后处理时间" align="center" min-width="160" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="taskbgntm" label="任务启动时间" align="center" min-width="160" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip width="170" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.stop="viewClick(scope.row, scope.$index)">查看</el-button>
              <el-button type="text" size="small" @click="endHandle(scope.row, scope.$index)">结束流程</el-button>
              <span style="margin-left: 20px;" class="operationIcon" @click="showImageList(scope.row.caseno)">
                <i class="el-icon-camera"></i>
              </span>
            </template>
          </el-table-column>1
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background v-if="paginations.total > 0" :page-sizes="paginations.pageSizes"
                :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
                :current-page="paginations.pageNum" @current-change="handleCurrentChange"
                @size-change="handleSizeChange">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--影像列表-->
    <clm-image-list :drawer="showImageFlag" :applnum="showImageApplnum" :busiType="clm_uw" @close="hideImageList">
    </clm-image-list>
  </div>
</template>

<script>
import transformation from "@/utils/transformation/qualityInspection";
import { mapGetters } from "vuex";
import constant from "@/utils/constant";
import taskConstants, { getSelectList } from "@/utils/taskConstants";
import ClmImageList from "@/page/common/clmImageList";
import { getChksnoApi, queryClmApi, endSubTaskApi, lockApi, unlockApi } from "@/api/taskCenter/twiceMessage";
import { getToken } from '@/utils/auth' // 验权(从cookie中获取)

export default {
  components: {
    ClmImageList,
  },
  data() {
    return {
      multipleSelection: [],
      userid: "",
      warnCount: 0, //预警个数
      ssyMap: {}, //机构对象
      nodeMap: {}, //节点对象
      docTypeMap: {}, //文件类型对象
      nextNodeMap: {},
      flag06s: [],
      clm_uw: "clm_uw", //只针对理赔二核的影像查询特殊处理标记
      clmstates: [],
      showNext: false,
      isShow: false,
      remarkTaskNo: "",
      showRemarkFlag: false,
      changeTaskNo: "",
      showChangeFlag: false,
      showAddRenewalFlag: false,
      showImageFlag: false,
      showImageApplnum: "",
      chkstatusTypes: [
        { label: "核保中", value: "P" },
        { label: "理赔确认", value: "S" },
        { label: "待客户签", value: "R" },
        { label: "完成", value: "C" },
      ],
      // 查询条件
      rules: {
        policyNo: [],
        acceptNo: [],
        channel: [],
        taskRank: [],
        markNo: [],
        institution: [],
        acceptdate: [],
        order: [],
      },
      searchParams: {
        pool: "", //
        sclmstatus: "", //理赔形态
        caseno: "", //受理号号
        sinsured: "", //被保人姓名
        spolicyer: "",
        flag06: "", //保单服务类型
        sfirchkusr: "",
        chkstatus: "P",//二核状态
        queryType: "TODO",
        pageSize: "",
        pageNumber: "",
        pageNum: "",
      },
      orderList: constant.order,
      multipleTable: [],
      tableData: [],
      loading: false,
      //需要给分页组件传的信息
      paginations: {
        total: 0, // 总数
        pageNum: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      isFirstEnter: false,
    };
  },
  created() {
    this.userid = JSON.parse(localStorage.getItem(getToken("token"))).userKeyInfo.id
  },
  activated() {
    this.getList();
    document.onkeydown = (event) => {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 113) {
        this.getList();
      }
    };
  },
  mounted() {
    setTimeout(() => {
      this.isFirstEnter = true;
    }, 100);
    this.clmstates = taskConstants.clmstateClm;
    this.flag06s = taskConstants.clmFlag06Clm;
  },
  methods: {
    hideImageList() {
      this.showImageApplnum = '';
      this.showImageFlag = false;
    },
    showImageList(applnum) {
      this.showImageApplnum = applnum;
      this.showImageFlag = true;
    },
    lock() {
      console.log(this.multipleSelection, "this.multipleSelection this.multipleSelection")
      let param = {
        taskDTOList: this.multipleSelection,
        checkoutusrid: this.userid

      }
      lockApi(param)
        .then((res) => {
          if (res.resultCode == 0) {
            this.getList();
            this.$message({
              message: res.resultMsg,
              type: "success",
              showClose: true,
            });
          }
        })
        .catch(() => { });
    },
    unlock() {
      console.log(this.multipleSelection, "this.multipleSelection this.multipleSelection")
      let param = {
        taskDTOList: this.multipleSelection,
        checkoutusrid: this.userid

      }
      unlockApi(param)
        .then((res) => {
          if (res.resultCode == 0) {
            this.getList();
            this.$message({
              message: res.resultMsg,
              type: "success",
              showClose: true,
            });
          }
        })
        .catch(() => { });
    },
    enterclick(param) {
      this.paginations.pageNum = 1;
      this.getList();
    },
    endHandle(row) {
      let param = {
        caseno: row.caseno,
        userId: this.userid,
        chksno: row.chksno,
      }
      endSubTaskApi(param)
        .then((res) => {
          if (res.resultCode == 0) {
            this.$message({
              message: "结束流程成功",
              type: "success",
              showClose: true,
            });
          }
          else if (res.resultCode == 500) { }
        })
        .catch(() => { });
    },
    viewClick(row, index) {
      let param = {
        clmnum: row.caseno,
        chktyp: "1",
      };
      if (row.chksno != undefined & row.chksno != '') {
        this.$router.push({
          path: `/underwrite/twiceMessage`,
          query: {
            clmnum: row.caseno,
            chksno: row.chksno,
            showFlag:'1'
          },
        });
      } else {
        getChksnoApi(param)
          .then((res) => {
            if (res.resultCode == 0) {
              var chksnoresult = res.data.chksno;
              this.$router.push({
                path: `/underwrite/twiceMessage`,
                query: {
                  clmnum: row.caseno,
                  chksno: chksnoresult,
                  showFlag:"1"
                },
              });
              //   this.$router.push({path:`/underwrite/twiceMessage?clmnum=${row.caseno}`})
            } else if (res.resultCode == 500) { }
          })
          .catch(() => { });
        }

      },
      //点击理赔号码跳转二次核保的页面
      clmnumClick(row, index) {
        if (row.schkousrid == undefined || row.schkousrid.trim() == "") {
          let param = {
            taskDTOList: [row],
            checkoutusrid: this.userid
          }
          lockApi(param)
            .then((res) => {
              if (res.resultCode == 0) {
                this.getList();
                this.$message({
                  message: res.resultMsg,
                  type: "success",
                  showClose: true,
                });
              }
            })
            .catch(() => { });
        } else {
          if (row.schkousrid != this.userid) {
            this.$message({
              message: "只能该" + row.schkousrid + "核保人员处理，其他核保人员不能处理!",
              type: "warning",
              showClose: true,
            });
            return
          }
        }
        if (row.taskStatus == "UR") {
          this.$confirm('此二核子任务已经结束，但您仍可查看二次核保信息，是否继续？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.goUnderwrite(row)
          }).catch(() => {
          });

        } else {
          this.goUnderwrite(row)
        }

      },
      goUnderwrite(row) {
        let param = {
          clmnum: row.caseno,
          chktyp: "1",
        };
        if (row.chksno != undefined & row.chksno != '') {
          this.$router.push({
            path: `/underwrite/twiceMessage`,
            query: {
              clmnum: row.caseno,
              chksno: row.chksno
            },
          });
        } else {
          getChksnoApi(param)
            .then((res) => {
              if (res.resultCode == 0) {
                var chksnoresult = res.data.chksno;
                this.$router.push({
                  path: `/underwrite/twiceMessage`,
                  query: {
                    clmnum: row.caseno,
                    chksno: chksnoresult
                  },
                });
                //   this.$router.push({path:`/underwrite/twiceMessage?clmnum=${row.caseno}`})
              } else if (res.resultCode == 500) { }
            })
            .catch(() => { });
        }
      },
      //查询条件--收起
      showorhide() {
        this.isShow = !this.isShow;
      },
      // 查询列表
      getList() {
        this.paginations.total = 0;
        this.tableData = [];
        this.$store.dispatch("loading/CHANGE_LOADING", true);
        this.searchParams.pageNum = this.paginations.pageNum;
        this.searchParams.pageSize = this.paginations.pageSize;
        queryClmApi(this.searchParams)
          .then((res) => {
            console.log("参数", this.searchParams);
            console.log("结果", res);
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode === 0) {
              this.paginations.total = res.data.total;
              this.tableData = res.data.list;

              this.tableData.forEach((item) => {
                //翻译二核类别
                item.chkstatus = this.transformationFun(
                  "chkstatus",
                  item.chkstatus
                );
                if (item.channel == 'W') {
                  item.channel = '微理赔'
                } else if (item.channel == 'M') {
                  item.channel = '移动理赔'
                } else if (item.channel == 'Z') {
                  item.channel = '纸质'
                }
                if (item.sclmstatus == 'D') {
                  item.sclmstatus = 'D-身故'
                } else if (item.sclmstatus == 'T') {
                  item.sclmstatus = 'T-全残'
                } else if (item.sclmstatus == 'P') {
                  item.sclmstatus = 'P-部分残废'
                }
                else if (item.sclmstatus == 'C') {
                  item.sclmstatus = 'C-重大疾病'
                } else if (item.sclmstatus == 'N') {
                  item.sclmstatus = 'N-一般医疗'
                } else if (item.sclmstatus == 'S') {
                  item.sclmstatus = 'S-慰问金'
                }
              });
            }
          })
          .catch((err) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
          });
      },
      // 枚举转换
      transformationFun(type, status) {
        return transformation.transformation(type, status);
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageNum = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageNum = 1;
        this.getList();
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 清除查询条件
      resetSearch() {
        this.searchParams.chdrnum = "";
        this.searchParams.spolicyer = "";
        this.searchParams.caseno = "";
        this.searchParams.checkoutusrid = "";
        this.searchParams.sinsured = "";
        this.searchParams.spostype = "";
        this.searchParams.sclmstatus = "";
        this.searchParams.flag06 = "";
        this.searchParams.chkstatus = "";
        this.searchParams.sfirchkusr = "";
        this.$refs.multipleTable.clearSort();
      },
      //预警
      rowStyle({ row, rowIndex }) {
        if (row.clorFlag == "1") {
          return "color:blue !important";
        } else if (row.clorFlag == "2") {
          return "color:red !important";
        } else if (row.clorFlag == "3") {
          return "color:green !important";
        } else {
          return "";
        }
      },
    },
    computed: {
      ...mapGetters(["tags"]),
    },
  };
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409eff !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }
    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 20px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>



